<template>
	<view class="fuzzy-search">
		<view class="input">
			<input class="search-input" type="text" v-model="inputContent" placeholder-class="placeholderFontClass"
				:placeholder="placeholder" @input="input" @blur="inputBlur" />
			<view class="list" v-if="isShow">
				<template v-if="list.length > 0">
					<view class="item" hover-class="item-hover" hover-stay-time="200" v-for="(item, i) in list" :key="i"
						@click="itemClick(item)">{{ item[label] }}-{{item[value]}}</view>
				</template>
				<template v-else>
					<view class="item">{{ noData }}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qj-fuzzy-search',
		props: {
			//value默认值
			inputValue: {
				type: String,
			},
			//placeholder内容
			placeholder: {
				type: String,
				default: '请输入内容'
			},
			//模糊查询到的列表（由后台返回）
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			//列表内要展示的内容 字段 默认shopId
			label: {
				type: String,
				default: () => {
					return 'shopId';
				}
			},
			//列表内要展示的内容 字段 默认shopName
			value: {
				type: String,
				default: () => {
					return 'shopName';
				}
			},
			//无内容匹配时的显示
			noData: {
				type: String,
				default: '暂无匹配内容！'
			}
		},
		data() {
			return {
				isShow: false, //是否显示搜索到的列表
				inputContent: this.inputValue,
			};
		},
		// computed: {
		// 	shopidValue: {
		// 		get: function() {
		// 			return this.value;
		// 		},
		// 		set: function(val) {
		// 			if (val) {
		// 				this.value = val.toUpperCase();
		// 			}
		// 		},
		// 	},
		// },
		methods: {
			// 显示查询到的列表值
			open() {
				this.isShow = true;
			},
			// 隐藏查询到的列表值
			close() {
				this.isShow = false;
			},
			input(e) {
				let value = e.detail.value.toUpperCase();
				this.inputContent = value;
				this.$emit('get-input-value', value);
			},
			inputBlur() {
				this.isShow = false;
			},
			itemClick(e) {
				this.inputContent = e[this.label] + "-" + e[this.value];
				this.close();
				this.$emit('confirm-value', e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.fuzzy-search {
		width: 100%;

		.input {
			position: relative;

			.placeholderFontClass {
				color: #ddd;
			}

			.search-input {
				box-sizing: border-box;
				width: 100%;
				background-color: transparent;
			}

			.list {
				width: 100%;
				max-height: 300rpx;
				padding: 5px;
				background-color: #ffffff;
				box-shadow: 0 0 10rpx #888888;
				border-radius: 10rpx;
				z-index: 999;
				position: absolute;
				left: 0;
				overflow: scroll;

				.item {
					padding: 5rpx 0;
					font-size: 14px;
					font-weight: bold;
					text-align: center;
					height: 34px;
					line-height: 34px;
					box-sizing: border-box;
				}

				.item-hover {
					background-color: #f5f5f5;
				}
			}
		}
	}
</style>
